<template>
  <div class="home">
    <div class="content">
      <!--首页头部-->
      <div class="header">
        <div class="text">外卖App</div>
        <!--定位-->
        <div class="location">
          <span>
            <van-icon name="location" />
            阜阳师范大学西湖校区
          </span>
            <van-icon name="arrow"/>
        </div>
      </div>
      <!--首页主要内容-->
      <div class="main">
        <div class="main_top">
          <!--搜索框-->
          <div class="search">
            <input type="text">
            <div class="search_icon">搜索</div>
          </div>
          <!--分类-->
          <div class="classify">
            <div class="big_classify">
              <div v-for="(item, index) in big_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                <div class="title">
                  {{item.name}}
                </div>
              </div>
            </div>
            <div class="small_classify">
              <div v-for="(item, index) in small_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                <div class="title">
                  {{item.name}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--Tab标签页-->
        <van-tabs class="van_tabs">
          <van-tab v-for="(item,index) in centent_nav_list" :key="index" :title="item.tab">
            <StoreList :store_list="item.data"></StoreList>
          </van-tab>
        </van-tabs>

      </div>

    </div>
    <FooterNav></FooterNav>
  </div>
</template>

<script>
import FooterNav from "@/components/FooterNav";
import StoreList from "@/pages/myHome/components/StoreList";
import {reactive, toRefs} from "vue";

export default {
  name: "MyHome",
  components: {
    FooterNav,
    StoreList
  },
  setup(){
    //mock数据
    let data = reactive({
      big_classify: [
        { name: "美食", icon: "icon-apple-and-pear" },
        { name: "甜点饮品", icon: "icon-tianpin" },
        { name: "超市便利", icon: "icon-chaoshi" },
        { name: "生鲜果蔬", icon: "icon-shuiguo" },
        { name: "团团买药", icon: "icon-yaopin" },
      ],
      small_classify: [
        { name: "午餐", icon: "icon-iconfonttubiaozhizuo-1" },
        { name: "买酒", icon: "icon-iconfonttubiaozhizuo-" },
        { name: "新鲜水果", icon: "icon-iconfonttubiaozhizuo-9" },
        { name: "汉堡披萨", icon: "icon-iconfonttubiaozhizuo-6" },
        { name: "休闲饮品", icon: "icon-iconfonttubiaozhizuo-8" },
        { name: "夜宵", icon: "icon-iconfonttubiaozhizuo-3" },
        { name: "吐司", icon: "icon-iconfonttubiaozhizuo-5" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-iconfonttubiaozhizuo-2" },
        { name: "全部分类", icon: "icon-fenlei" },
      ],
      centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
              title: "隆江猪脚饭",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ],
    });
    return{
      ...toRefs(data)
    }
  }
}
</script>

<style lang="less" scoped>
//深度选择
/deep/.van-tabs__wrap{
  border-radius: 30px;
}
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .header{
    background-image: linear-gradient(#ffc400,#ffffff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 60px 20px;
    .text{
      font-size: 35px;
      font-weight: 600;
    }
    .location{
      span{
        margin: 0 5px;
      }
      font-size: 30px;
      font-weight: 600;
    }
  }
  .main{
    margin-top: -30px;
    .main_top{
      background-image: linear-gradient(#ffffff, #f5f5f5);
      padding: 10px 20px 0 20px;
      border-radius: 30px 30px 0 0;
      position: relative;
      .search{
        position: relative;
        input{
          width: 100%;
          border: 1px solid #ffc400;
          border-radius: 20px;
          height: 50px;
        }
        .search_icon{
          position: absolute;
          background-color: #ffc400;
          right: -6px;
          top: 3px;
          width: 80px;
          height: 50px;
          border-radius: 16px;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          font-weight: 600;
        }
      }
      .classify{
        padding: 20px 0;
        .big_classify{
          display: flex;
          div{
            flex: 1;
            display: flex;
            justify-content: center;
            flex-flow: column;
            align-items: center;
            .icon{
              width: 100px;
              height: 100px;
            }
            .title{
              font-size: 25px;
              font-weight: 600;
            }
          }
        }
      }
      .small_classify{
        display: flex;
        flex-wrap: wrap;
        margin-top: 50px;
        div{
          display: flex;
          justify-content: center;
          flex-flow: column;
          align-items: center;
          width: 140px;
          margin-bottom: 20px;
          .icon{
            width: 70px;
            height: 60px;
          }
          .title{
            font-size: 20px;
            font-weight: 600;
          }
        }
      }
    }

    .van_tabs{
      padding: 0 20px 10px;
    }

  }
}
</style>